<template>
  <div class="container">
    <mt-header title="添加日程">
      <router-link :to="{name:'schedule'}" replace slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button slot="right" @click="handleCreateSchedule">
        <i class="fa fa-save"></i>
      </mt-button>
    </mt-header>
    <div class="input-wrapper">
      <mt-field label="名称" placeholder="请输入名称" v-model="scheduleReq.name"></mt-field>
      <mt-field label="来访人员" placeholder="请输入来访人员" v-model="scheduleReq.visitors"></mt-field>
      <mt-field label="出席领导" placeholder="请输入出席领导" v-model="scheduleReq.leaders"></mt-field>
      <mt-field label="参加人员" placeholder="请输入参加人员" v-model="scheduleReq.participants"></mt-field>
      <mt-field label="地点" placeholder="请输入地点" v-model="scheduleReq.location"></mt-field>
      <mt-field label="日程类型" @click.native="popupVisible = !popupVisible" placeholder="请选择日程类型" v-model="scheduleReq.type" readonly></mt-field>
      <mt-field label="开始时间" @click.native="handleDatePop(1)" placeholder="选择开始日期" v-model="scheduleReq.startTime" readonly></mt-field>
      <mt-field label="结束时间" @click.native="handleDatePop(2)" placeholder="选择结束日期" v-model="scheduleReq.endTime" readonly></mt-field>
      <mt-field label="备注" placeholder="" type="textarea" rows="4" v-model="scheduleReq.content"></mt-field>
      <mt-button size="large" plain type="danger" style="width: 80%; margin: 10px auto;" @click="handleCreateSchedule">保存</mt-button>
    </div>
    <mt-popup
      v-model="popupVisible"
      :modal="true"
      position="bottom"
      class="pop-up">
      <div class="picker-container">
        <div class="header">

        </div>
        <mt-picker :slots="scheduleTypes" @change="onValuesChange" show-toolbar>
          <span class="mint-datetime-action mint-datetime-cancel" @click="popupVisible = !popupVisible">取消</span>
          <span class="mint-datetime-action mint-datetime-confirm" @click="popupVisible = !popupVisible">确定</span>
        </mt-picker>
      </div>
    </mt-popup>
    <mt-popup
      v-model="datePopupVisible"
      :modal="true"
      position="bottom"
      class="pop-up">
      <div class="picker-container">
        <div class="header">

        </div>
        <mt-picker ref="datePicker" :slots="monthAndDays" @change="onDateValuesChange" show-toolbar v-model="currentDate">
          <span class="mint-datetime-action mint-datetime-cancel" @click="datePopupVisible = !datePopupVisible">取消</span>
          <span class="mint-datetime-action mint-datetime-confirm" @click="datePopupVisible = !datePopupVisible">确定</span>
        </mt-picker>
      </div>
    </mt-popup>
  </div>
</template>
<script>
  import moment from 'moment'
  import fetch from '../../utils/fetch'
  import { Toast } from 'mint-ui';
  import MtField from "../../../node_modules/mint-ui/packages/field/src/field";
  import MtPopup from "../../../node_modules/mint-ui/packages/popup/src/popup";
  export default {
    components: {
      MtPopup,
      MtField},
    data (){
      return{
        popupVisible:false,
        datePopupVisible:false,
        scheduleTypeStr: '',
        currentTimeFlag: 0,
        scheduleReq:{
          name: '',
          location: '',
          visitors: '',
          leaders:'',
          participants: '',
          type: 0,
          startTime: '',
          endTime: '',
          content: '',
          currentDate: ''
        },
        scheduleTypes:[
          {
            flex: 1,
            values: ['项目接待', '会议', '出差', '培训', '其他'],
            className: 'slot1',
            textAlign: 'center',
            showToolbar: true,
          }
        ],
        monthAndDays:[]
      }
    },
    methods:{
      handleClick(type){
        this.type = type
        this.$refs.picker.open();
      },
      handleCreateSchedule() {
        if(!this.validateForm()) {
          return
        }
        this.scheduleReq.startTime = moment(this.scheduleReq.startTime).format('YYYY-MM-DD HH:mm:ss')
        this.scheduleReq.endTime = moment(this.scheduleReq.endTime).format('YYYY-MM-DD HH:mm:ss')
        let formData = JSON.stringify(this.scheduleReq)
        fetch.post('/api/pim/schedule', formData).then(response =>{
          if(response.data.success) {
            Toast({
              message: '操作成功',
              iconClass: 'mintui mintui-success'
            });
            this.$router.replace({name: 'schedule'})
          } else {
            Toast({
              message: response.data.msg,
              position: 'bottom',
              duration: 5000
            });
          }
        })
      },
      onValuesChange(picker, values) {
        this.scheduleReq.type = values[0]
      },
      onDateValuesChange(picker, values) {
        let dateVal = picker.getValues(0).toString().split(',')
        let year = moment().format('YYYY')
        let month = dateVal[0].substring(0, dateVal[0].length -1)
        let day = dateVal[1].substring(0, dateVal[1].length -1)
        let hour= dateVal[2].substring(0, dateVal[1].length -1)
        let miniute = dateVal[3].substring(0, dateVal[1].length -1)
        if(this.currentTimeFlag === 1) {
          this.scheduleReq.startTime = this.formateDate(year, month, day, hour, miniute)
        }
        if(this.currentTimeFlag === 2) {
          this.scheduleReq.endTime = this.formateDate(year, month, day, hour, miniute)
        }

      },
      formateDate(year, month, day, hour, miniute) {
        return year + '-' + month + '-' + day + ' ' + hour + ':' + miniute
      },
      handleDatePop(flag) {
        this.currentTimeFlag = flag
        this.datePopupVisible = !this.datePopupVisible
      },
      validateForm(){
        if(this.scheduleReq.name.trim().length === 0) {
          this.tips('名称不能为空')
          return false
        }
        if(this.scheduleReq.startTime.trim().length === 0) {
          this.tips('开始时间不能为空')
          return false
        }

        if(this.scheduleReq.endTime.trim().length === 0) {
          this.tips('结束时间不能为空')
          return false
        }

        return true
      },
      tips(msg){
        Toast({
          message: msg,
          position: 'bottom',
          duration: 1500
        });
      },

      fillValues(start, end, type) {
        let values = [];
        let suffix = type === 'M'? '月': '日'
        for (let i = start; i <= end; i++) {
          if (i < 10) {
            values.push('0' + i + suffix);
          } else {
            values.push(i+ suffix);
          }
        }
        return values;
      },
      pushSlots(slots,start, end, type, value) {
        slots.push({
          flex: 1,
          values: this.fillValues(start, end, type),
          value: value,
          defaultIndex:  (parseInt(value, 10) -1)
        });
      },
      generateSolts(){
        //初始化月份
        this.pushSlots(this.monthAndDays, 1, 12, 'M', moment().format('MM'))
        //初始化分隔符
        this.monthAndDays.push({
          divider: true,
          content: '-',
          className: 'slot2'
        })
        //初始化日
        this.pushSlots(this.monthAndDays, 1, 30, 'D', moment().format('DD'))
        //初始化分隔符
        this.monthAndDays.push({
          divider: true,
          content: '-',
          className: 'slot2'
        })
        // 初始化时间
        this.monthAndDays.push({
          flex: 1,
          values: ['08时', '09时', '10时', '11时','12时', '13时', '14时', '15时', '16时', '17时', '18时'],
          className: 'slot1',
          textAlign: 'right',
          defaultIndex:  1,
          value: '09时',
          valueKey: 1
        })

        this.monthAndDays.push({
          divider: true,
          content: ':',
          className: 'slot2'
        })

        this.monthAndDays.push({
          flex: 1,
          values: ['00分', '15分', '30分', '45分'],
          className: 'slot3',
          textAlign: 'left'
        })
      }

    },
    mounted(){
      this.generateSolts()
    }
  }
</script>
<style scoped>
  a:link{text-decoration:none;}
  a:visited{text-decoration:none;}
  a:hover{text-decoration:none;}
  a:active{text-decoration:none;}
  .pop-up{
    width: 100%;
  }
</style>
